React 批处理：为高性能应用优化的状态更新策略

            
function MyComponent() {
  const [countA, setCountA] = React.useState(0);
  const [countB, setCountB] = React.useState(0);

  const handleClick = () => {
    setCountA(countA + 1);
    setCountB(countB + 1);
  };

  return (
    <button onClick={handleClick}>
      Increment Both
    </button>
  );
}

            

              
                Copy
              
            
          

            
function MyComponent() {
  const [countA, setCountA] = React.useState(0);
  const [countB, setCountB] = React.useState(0);

  const handleClick = () => {
    setTimeout(() => {
      setCountA(countA + 1);
      setCountB(countB + 1);
    }, 0);
  };

  return (
    <button onClick={handleClick}>
      Increment Both
    </button>
  );
}

            

              
                Copy
              
            
          

            
function MyComponent() {
  const [data, setData] = React.useState({
    name: '',
    email: '',
    age: 0,
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setData({ ...data, [name]: value });
  };

  return (
    <form>
      <input type="text" name="name" value={data.name} onChange={handleChange} />
      <input type="email" name="email" value={data.email} onChange={handleChange} />
      <input type="number" name="age" value={data.age} onChange={handleChange} />
    </form>
  );
}

            

              
                Copy
              
            
          

            
function MyComponent() {
  const [count, setCount] = React.useState(0);

  const handleClick = () => {
    setCount((prevCount) => prevCount + 1);
  };

  return (
    <button onClick={handleClick}>
      Increment
    </button>
  );
}

            

              
                Copy
              
            
          

            
function MyComponent() {
  const [count, setCount] = React.useState(0);

  const increment = React.useCallback(() => {
    setCount((prevCount) => prevCount + 1);
  }, []);

  return (
    <ChildComponent increment={increment} />
  );
}

function ChildComponent({ increment }) {
  React.useEffect(() => {
    console.log('ChildComponent rendered');
  });
  return (<button onClick={increment}>Increment</button>);
}

            

              
                Copy
              
            
          

            
import { debounce } from 'lodash';

function MyComponent() {
  const [searchTerm, setSearchTerm] = React.useState('');

  const handleInputChange = (e) => {
    const value = e.target.value;
    setSearchTerm(value);
    debouncedSearch(value);
  };

  const search = (term) => {
    console.log('Searching for:', term);
    // Perform search logic here
  };

  const debouncedSearch = React.useMemo(() => debounce(search, 300), []);

  return (
    <input type="text" onChange={handleInputChange} />
  );
}

            

              
                Copy
              
            
          

            
function MyComponent() {
  const [position, setPosition] = React.useState(0);

  React.useEffect(() => {
    const animate = () => {
      requestAnimationFrame(() => {
        setPosition((prevPosition) => prevPosition + 1);
        animate();
      });
    };

    animate();
  }, []);

  return (
    <div style={{ transform: `translateX(${position}px)` }}>
      Moving Element
    </div>
  );
}

            

              
                Copy
              
            
          

            
import { flushSync } from 'react-dom';

function MyComponent() {
  const [text, setText] = React.useState('');

  const handleChange = (e) => {
    const value = e.target.value;
    flushSync(() => {
      setText(value);
    });
    // Perform other synchronous operations that rely on the updated text
    console.log('Text updated synchronously:', value);
  };

  return (
    <input type="text" onChange={handleChange} />
  );
}

            

              
                Copy